<template>
    <div class="user-panel" :class="classObject">
        <div class="user-panel-inner">
            <div class="image">
                <img src="../assets/images/logo.svg" class="self-image" alt=""/>
            </div>
            <div class="info">
                <p><img src="../assets/images/siderbar-logo/command.svg" alt=""></p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "userPanel",
        props: {
            collapse: false,
        },
        computed: {
            classObject: function () {
                return {
                    active: this.collapse,
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "./../assets/scss/mixin";

    .sidebar {
        .user-panel {
            height: 150px;
            @include centering;

            .user-panel-inner {
                .image {
                    @include centering;
                    margin: 0 auto;

                    img {
                        display: block;
                        @include transition(width, 100ms, ease-in-out);
                        width: 82px;
                    }
                }

                .info {
                    left: auto;
                    margin-top: 30px;
                    img {
                        display: block;
                        @include transition(width, 100ms, ease-in-out);
                        width: 165px;
                    }
                }
            }
        }

        .user-panel.active {
            .user-panel-inner {
                .image {
                    img {
                        width: 30px;
                        height: 30px;
                    }
                }

                .info {
                    opacity: 0;
                    img {
                        width: 65px;
                    }
                }
            }
        }
    }

</style>